<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ajax</title>
	<style type="text/css">
		.profile{
			width:400px;
			margin:0 auto;
			border:1px solid #ccc;
			min-height: 300px;
		}
		
	</style>
</head>


<body>
	<div class="profile">
		<p><span>姓名</span> <span id="sname"></span></p>
		<p><span>身高</span> <span id="sheight"></span></p>
		<p><span>性别</span> <span id="ssex"></span></p>
		<p><span>颜色</span> <span id="scolor"></span></p>
		<p><span>喜欢</span> <span id="slike"></span></p>
		<p><span>座右铭</span> <span id="smotto"></span></p>
		<p><span>最爱</span> <span id="sfavorite"></span></p>
		<p><span>她的舍友</span> <span id="sherroommates"></span></p>
		
	</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

	$.get("data/student.json",function(res){
		// console.log("返回的结果是：-------");
		// console.log(res);
		$('#sname').text(res.name);
		$('#sheight').text(res.height);
		$('#ssex').text(res.sex);
		$('#scolor').text(res.color);
		$('#slike').text(res.like);
		$('#smotto').text(res.motto);
		$('#sfavorite').text(res.favorite);

/*因为她的舍友是一个数组，所以要用 for 循坏来写*/
		var f='';

		for(var i=0;i<res.herroommates.length;i++){
			f +=res.herroommates[i].name +" ";
		}

		$("#sherroommates").text(f);

	})
	

</script>
</body>
</html>